<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix Dialog</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/Dialog.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        height: 200%; /* So the page always scrolls */
      }

      :not(:defined) {
        display: none;
      }

      /* Force the scroll bar to appear so we see it hide when overlay opens. */
      body::-webkit-scrollbar {
        background: lightgray;
      }
      body::-webkit-scrollbar-thumb {
        background: darkgray;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo padded">
      <style>
        #floating {
          background: white;
          position: relative;
          z-index: 1;
        }
      </style>

      <p>
        <button id="openButton" onclick="sampleDialog.open()">
          Open dialog
        </button>
      </p>
      <elix-dialog id="sampleDialog" aria-label="Sample dialog">
        <div style="padding: 1em;">
          Here's a dialog.
          <div style="margin-top: 1em; text-align: center;">
            <button onclick="sampleDialog.close()">Close</button>
          </div>
        </div>
      </elix-dialog>

      <p id="floating">
        This paragraph has a z-index, but should appear behind the dialog. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem
        scelerisque, blandit libero vitae, dapibus nisl. Sed turpis diam,
        placerat a feugiat sed, maximus at velit. Ut sit amet semper sapien.
        Donec vitae leo ex. Duis eget quam sed metus tempor lobortis eget
        feugiat elit. Cras varius, arcu ac commodo tincidunt, lectus dui
        convallis nunc, quis maximus nisl erat ac mi. Phasellus et velit diam.
      </p>
    </div>
  </body>
</html>
